<template>
  <div class="owe-book">
    <!-- 导航 -->
    <van-nav-bar title="拥有的书" left-arrow @click-left="back()" />
    <!-- 导航栏 -->
    <div class="owe-nav">
      <span
        class="nav-item"
        :class="isLight == 0 ? 'active' : ''"
        @click="toEbook"
        >电子书</span
      >
      <span
        class="nav-item"
        :class="isLight == 1 ? 'active' : ''"
        @click="toPbook"
        >纸质书</span
      >
    </div>
    <div class="body">
      <!-- 搜索 -->
      <div class="search">
        <van-search v-model="query" placeholder="搜索" @search="getOweData" />
        <span v-show="desc == true" @click="desc = false">按时间降序</span>
        <span v-show="desc == false" @click="desc = true">按时间升序</span>
      </div>
      <!-- contain -->
      <div class="contain" v-show="isLight == 0">
        <!-- BookItemA -->
        <BookItemA
          v-for="b in bookList.bookItems"
          :key="b.id"
          :book-name="b.name"
          :book-authors="b.authors"
          :cover-key="b.coverKey"
          :id="b.id"
        />
      </div>
      <!-- contain -->
      <div class="contain" v-show="isLight == 1"></div>
    </div>
  </div>
</template>

<script>
import { OweBookAPI } from "@/apis";
import BookItemA from "@/components/BookItem-A.vue";
export default {
  data() {
    return {
      // 参数
      type: "ShelfEBook",
      page: 1,
      query: "",
      // 排序状态
      desc: true,
      // 输入值

      // 高亮状态
      isLight: 0,
      // bookList
      bookList: {},
    };
  },
  mounted() {
    this.getOweData();
  },
  watch: {
    desc() {
      this.getOweData();
    },
  },
  methods: {
    // 网络请求
    async getOweData() {
      // 主要网络请求
      let { data } = await this.$http(
        OweBookAPI(this.type, this.page, this.query, this.desc),
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );
      this.bookList = data;
    },
    // 回退
    back() {
      this.$router.go(-1);
    },
    // to Ebook
    toEbook(){
      this.isLight = 0;
      this.type = 'ShelfEBook';
    },
    // to Pbook
    toPbook(){
      this.isLight = 1;
      this.type = 'ShelfPaper';
    }
  },
  components: {
    BookItemA,
  },
};
</script>

<style lang="scss" scoped>
.owe-book {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 1999;
  .van-nav-bar {
    padding: 2px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  // 导航
  .owe-nav {
    padding: 65px 0 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--more-bg-white);
    .nav-item {
      margin: 0 10px;
      color: var(--more-font-grey);
      font-size: 14px;
      &.active {
        font-size: 20px;
        line-height: 26px;
        color: var(--book-name-font-black);
      }
    }
  }
  .body {
    padding: 15px;
    background-color: #fff;
    .search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        color: var(--theme-blue);
        font-size: 14px;
        line-height: 20px;
      }
    }
    .contain {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>